<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布商品</title>
</head>
<style>
    #footer {
        margin-left: 50%;
        margin-bottom: 40px;
        position: absolute;

        bottom: 0;
    }

    .goods {
        outline: #00FF00 dotted thick;
        border-radius: 2em;
    }
    input[type='number'] {
        -moz-appearance: textfield !important;
    }

</style>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div id="app">
    <div>
        <template>
            <div>
                <div style="margin-top: 30px;">
                    <el-button type="primary" style="margin-left: 5px" @click="dialogFormVisible = true">发布商品 </el-button>

                    <el-button type="primary" style="margin-left: 850px" @click="changeStatus(1)"
                               :disabled="btnUnChecked">未审核 </el-button>
                    <el-button type="success" style="margin-left: 5px" @click="changeStatus(2)"
                               :disabled="btnPassed">已通过 </el-button>
                    <el-button type="danger" style="margin-left: 5px" @click="changeStatus(3)"
                               :disabled="btnUnPassed">未通过 </el-button>
                    <el-button type="danger" style="margin-left: 5px" @click="changeStatus(5)"
                               :disabled="btnUnBuyed">流拍 </el-button>
                </div>
            </div>
        </template>
    </div>

    <el-table :data="tableData" border stripe style="margin-top:30px">
        <!-- <el-table-column
  align="center"
  type="selection"
  width="55"
></el-table-column> -->
        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>

        <el-table-column align="center" prop="typeName" label="类别" width="80"></el-table-column>
        <el-table-column align="center" prop="startingPrice" label="起拍价" width="80"></el-table-column>
        <el-table-column align="center" prop="priceMarkup" label="加价幅度" width="80"></el-table-column>
        <el-table-column align="center" prop="deposit" label="保证金金额" width="100"></el-table-column>
        <el-table-column align="center" prop="startingTime" label="开始时间" width="160"></el-table-column>
        <el-table-column align="center" prop="endTime" label="结束时间" width="160"></el-table-column>

        <el-table-column align="center" prop="status" label="状态" width="100">
            <template v-slot="scope">
                <span v-if="scope.row.status == 1">未审核</span>
                <span v-if="scope.row.status == 2">已通过</span>
                <span v-if="scope.row.status == 3">未通过</span>
                <span v-if="scope.row.status == 4">交易完成</span>
                <span v-if="scope.row.status == 5">流拍</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="255" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)" size="small">查看详情 </el-button>
                <el-button type="danger" @click="removeGoods(scope.row)" size="small">移除 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" id="footer">
        <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                       :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>

    <el-dialog title="商品信息" :visible.sync="dialogFormVisible" :append-to-body="true"  center>
        <el-form ref="publishForm" :model="publishForm" label-width="103px" :rules="rules">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="publishForm.goodsName" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="商品类型" prop="typeId">
                <el-select v-model="publishForm.typeName" placeholder="请选择商品类型"  @change="changeType">
                    <el-option
                            v-for="item in types"
                            :key="item.typeId"
                            :label="item.typeName"
                            :value="item.typeName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拍卖时间" prop="time">
                <el-col :span="11">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions"
                            v-model="publishForm.time"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>

            </el-form-item>
            <el-form-item label="起拍价(元)" prop="startingPrice" >
                <el-input v-model="publishForm.startingPrice"  oninput ="value=value.replace(/[^0-9]/g,'')" type="number" ></el-input>
            </el-form-item>
            <el-form-item label="保证金(元)" prop="deposit">
                <el-input v-model="publishForm.deposit"  oninput ="value=value.replace(/[^0-9]/g,'')"  placeholder="建议在起拍价的10%-30%"  type="number"></el-input>
            </el-form-item>
            <el-form-item label="加价幅度(元)" prop="priceMarkup" >
                <el-input v-model="publishForm.priceMarkup" oninput ="value=value.replace(/[^0-9]/g,'')" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="description" >
                <el-input type="textarea" v-model="publishForm.description"  maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="fileList" >
                <el-upload
                        class="upload-demo"
                        action="/common/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="handleBeforeUpload"
                        :limit="6"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                        :on-success="handleSuccess"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，并且不能大于2M</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="publishGoods()" >发布</el-button>
                <el-button style="margin-left: 300px;" @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>






</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                rules: {
                    goodsName: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    typeId: [
                        { required: true, message: '请输入商品类型',trigger: 'change' }
                    ],
                    time: [
                        { required: true, message: '请选择时间', trigger: 'blur' }
                    ],
                    startingPrice: [
                        { required: true, message: '请输入起拍价', trigger: 'blur' }
                    ],
                    deposit:[
                        { required: true, message: '请输入保证金', trigger: 'blur' }
                    ],
                    priceMarkup:[
                        { required: true, message: '请输入加价幅度', trigger: 'blur' }
                    ],
                    description:[
                        { required: true, message: '请输入商品描述', trigger: 'blur' }
                    ],
                    // fileList:[
                    //     { required: true, message: '至少上传一张图片', trigger: 'blur' }
                    // ]

                },
                fileList: [

                ],
                value1: [],
                dialogFormVisible: false,
                publishForm: {
                    images: [],
                    deposit: "",
                    description: "",
                    endTime:"",
                    goodsName: "",
                    priceMarkup: "",
                    startingPrice: "",
                    startingTime: "",
                    time: [],
                    typeId: "",
                    typeName: "",
                    userId: "",
                },
                formLabelWidth: '120px',
                btnUnChecked: false,
                btnPassed: false,
                btnUnPassed: false,
                btnUnBuyed: false,
                types: [{
                    "typeId": "2",
                    "typeName": "黄金",
                    "createTime": null,
                    "updateTime": null
                },
                    {
                        "typeId": "3",
                        "typeName": "翡翠",
                        "createTime": null,
                        "updateTime": null
                    },
                    {
                        "typeId": "4",
                        "typeName": "钻石",
                        "createTime": null,
                        "updateTime": null
                    },
                    {
                        "typeId": "5",
                        "typeName": "配饰",
                        "createTime": null,
                        "updateTime": null
                    },

                ],
                type: "",
                tableData: [{
                    "goodsId": "1",
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": "50",
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "startingTime": "2022/12/01 15:00",
                    "endTime": "2022/12/02 15:00",
                    "priceMarkup": "50",
                    "images": null,
                    "typeName": "表",
                    "status": "1",
                    "userName": "LostSouls",
                    "realName": null,
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0
                }],

                pagination: { //分页相关模型数据
                    currentPage: 1, //当前页码
                    pageSize: 8, //每页显示的记录数
                    total: 0, //总记录数
                },
                publishForm:{},
                status: "1",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                pickerOptions: {
                    disabledDate(time) {
                        const date = new Date();
                        return time.getTime() < date.getTime();

                    },
                }

            };



        },

        created() {
            this.getAll();
            axios.get("/type/getAllType2").then((res) => {
                this.types = res.data.data;
            })
        },



        methods: {
            handleSuccess(res,file,fileList) {
                fileList[fileList.length - 1].name = res.data;
                console.log(fileList);
                this.fileList = fileList;
                // if(this.fileList == null){
                //
                // }
                // this.fileList[this.fileList.length].name = res.data.data;
                // console.log(this.fileList)
                // if(this.publishForm.images == null){
                //     this.publishForm.images = []
                // }
                // this.publishForm.images[this.publishForm.images.length] = res.data;
            },
            removeGoods(row){

                this.$confirm("你确认移除吗？","提示",{type:"info"}).then(() => {
                    axios.get("/goodsInfo/removeGoods/" + row.goodsId).then((res) => {
                        if(res.data.code == 0){
                            this.$message.error(res.data.msg)
                        }else {
                            this.$message.success(res.data.data)
                            this.getAll();
                        }
                    })
                }).catch(() => {
                    this.$message.info("取消操作");
                })

            },
            changeType(val){
                let obj = {}
                obj = this.types.find(item => {
                    return item['typeName'] === val
                });
                this.publishForm.typeId = obj.typeId
            },

            publishGoods(){
                this.$refs.publishForm.validate(async (valid) => {
                    if(valid){
                        this.publishForm.startingTime = this.publishForm.time[0]
                        this.publishForm.endTime = this.publishForm.time[1]
                        this.publishForm.startingTime
                        this.publishForm.userId = sessionStorage.getItem("userId")
                        this.publishForm.images = [];
                        for(var i = 0 ;i < this.fileList.length;i++){
                            this.publishForm.images[i] = this.fileList[i].name;
                        }
                        console.log(this.publishForm)
                        axios.post("/goodsInfo/addGoods",this.publishForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else{
                                this.$message.success(res.data.data)
                                this.publishForm = {
                                    images: [],
                                    deposit: "",
                                    description: "",
                                    endTime:"",
                                    goodsName: "",
                                    priceMarkup: "",
                                    startingPrice: "",
                                    startingTime: "",
                                    time: [],
                                    typeId: "",
                                    typeName: "",
                                    userId: "",
                                }
                                this.fileList = [],
                                this.dialogFormVisible = false;
                                this.getAll();
                            }
                        })
                    }
                })
            },

            handleExceed(files, fileList){
                this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleRemove(file, fileList) {
                this.fileList = fileList;
            },
            handlePreview(file) {
                console.log(file);
            },
            handleBeforeUpload(file) {
                const uploadLimit = 2
                const uploadTypes = ['jpg', 'png']
                const filetype = file.name.replace(/.+\./, '')
                const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
                if (!isRightSize) {
                    this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
                    return false
                }

                if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
                    this.$message.warning({
                        message: '请上传jpg、png格式的图片'
                    })
                    return false
                }

                return true
            },
            getAll() {
                this.btnUnChecked = false;
                this.btnUnPassed = false;
                this.btnPassed = false;
                this.btnUnBuyed = false;
                if (this.status == "1") {
                    this.btnUnChecked = true;
                }
                if (this.status == "2") {
                    this.btnPassed = true;
                }
                if (this.status == "3") {
                    this.btnUnPassed = true;
                }
                if (this.status == "5") {
                    this.btnUnBuyed = true;
                }
                axios.get("/goodsInfo/getAll/" + this.pagination.currentPage + "/" + this.pagination.pageSize +
                    "/" + this.status + "/" + sessionStorage.getItem("userId")).then((res) => {
                    this.tableData = res.data.data.list;
                    this.pagination.pagesize = res.data.data.pageSize;
                    this.pagination.currentPage = res.data.data.pageNum;
                    this.pagination.total = res.data.data.total;
                })

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getAll();
            },
            viewDetails(row) {

                sessionStorage.setItem("goodsId", row.goodsId);
                window.location.href = "./detail.html"
                // this.form = row;

                // this.dialogFormVisible= true;
                // this.$alert("点击" + this.dialogFormVisible)
            },
            changeStatus(status) {
                this.status = status;
                this.pagination.currentPage = 1;
                this.getAll();
            }
        }

    })
</script>

</html>